<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="打印日志">
        <el-switch v-model="form.enable" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="日志级别" v-if="form.enable">

        <el-checkbox-group @change="handleCheckedCitiesChange" v-model="form.loglevelmask">

          <el-checkbox v-for="item in leves" :label="item.value" name="type">{{item.text}}</el-checkbox>

        </el-checkbox-group>
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  const levelList=[
    {
      text:'调试',
      value:1
    },
    {
      text:'消息',
      value:2
    },
    {
      text:'重要',
      value:4
    },
    {
      text:'告警',
      value:8
    },
    {
      text:'错误',
      value:16
    },
  ]
    export default {
        name: "level",
      data:function(){
        return{
          leves:levelList,
          checkAll: false,
          isIndeterminate: true,
          form:{
            enable:false,
            loglevelmask:[]
          },
          dialogVisible: false,
          loading:false,
          restartStatus:false
        }
      },
      methods:{
        handleCheckAllChange(val) {
          this.form.loglevelmask = val ? [1,2,4,8,16] : [];
          console.log(this.form.loglevelmask);
        },
        handleCheckedCitiesChange(value) {

          console.log(this.form.loglevelmask);
          let checkedCount = value.length;

          this.checkAll = checkedCount === levelList.length;
          console.log(checkedCount);
        },

        getloginfo:function(){
          var _this=this
          _this.postAjax({
            method:'getloginfo',
            params:{}
          }).then(function (res) {
            console.log(res);
            if(res.result==0){
              var data=res.params
              // debugger
              _this.form.enable=data.enable
              var loglevelmask=data.loglevelmask
              _this.form.loglevelmask=[]
              if((loglevelmask&1)==1){
                _this.form.loglevelmask.push(1)
              }
              if((loglevelmask&2)==2){
                _this.form.loglevelmask.push(2)
              }
              if((loglevelmask&4)==4){
                _this.form.loglevelmask.push(4)
              }
              if((loglevelmask&8)==8){
                _this.form.loglevelmask.push(8)
              }
              if((loglevelmask&16)==16){
                _this.form.loglevelmask.push(16)
              }
              _this.checkAll = _this.form.loglevelmask.length==5
              console.log(_this.form.loglevelmask);
            }else{
              _this.tips(res.errorInfo.detail,'error')
            }
          }).catch(function (err) {
            console.log(err);
            _this.tips(res.errorInfo.detail,'error')
          }).finally(function (fn) {
            console.log(fn);
          })
        },

        onSubmit:function(){
          var _this=this
          var level=0
          if(this.form.loglevelmask.length){
            for(var i=0;i<this.form.loglevelmask.length;i++){
              level+=this.form.loglevelmask[i]*1
            }
          }
          _this.postAjax({
            method:'setloginfo',
            params:{
              enable:_this.form.enable*1,
              loglevelmask:level
            }
          }).then(function (res) {
            console.log(res);
            if(res.result==0){
              _this.tips('保存成功','success')
            }else{
              _this.tips(res.errorInfo.detail,'error')
            }
          }).catch(function (err) {
            console.log(err);
            _this.tips(res.errorInfo.detail,'error')
          }).finally(function (fn) {
            console.log(fn);
          })

        }
      },
      mounted:function () {
        this.getloginfo()
      }
    }
</script>

<style scoped>
  .timingsMsg{
    color:red;
    font-size: 14px;
  }
</style>
